<!--
 * @Author: hu_binbin
 * @Date: 2021-08-19 20:55:26
 * @LastEditTime: 2021-08-23 08:49:36
 * @Description: 登记运行记录 包含多个设备
-->
<template>
	<article class="bg_4dbfae">
		<Theader :title="title">
			<template slot="header_arrow">
				<van-icon size="25" name="arrow-left" @click="$pageBack"/>
			</template>
		</Theader>
        <div style="overflow-y: auto;height: calc(100% - 7rem);padding-bottom: 3rem; margin-top: 3.5rem;">
            <div>
                <div class="oper-status">
                    <div class="label-ll">
                        <van-cell class="selRadio" title="运行正常">
                            <template slot="default">
                                <van-radio-group v-model="radio" direction="horizontal">
                                    <van-radio checked-color="#17B39B" name="1">是</van-radio>
                                    <van-radio checked-color="#17B39B" name="2">否</van-radio>
                                </van-radio-group>
                            </template>
                        </van-cell>
                        <van-field 
                            label="实际开始时间"  
                            readonly 
                            is-link
                            placeholder="请选择"
                            :border="false"
                            v-model="taskDetail.substationName"
                        />
                        <van-field 
                            label="实际结束时间"  
                            readonly 
                            is-link
                            placeholder="请选择"
                            :border="false"
                            v-model="taskDetail.substationName"
                        />
                    </div>
                </div>
            </div>
            <div class="tabBox bgcf5f6fa">
                <div class="tabItem">
                    <div class="tabItemSon">
                        <div class="wordTitle">
                            <div class="ml_1rem">
                                <van-icon name="edit" size="1.3rem" />
                                <div>集中抄录</div>
                            </div>
                        </div>
                        <div class="wordTitle1 mt1rem">
                            <div class="deviceType" :class="{selectBtn:SelectActive=='deviceType'}"
                                @click="selectShowData('deviceType')">
                                设备类型
                            </div>
                            <div class="interval" :class="{selectBtn:SelectActive=='interval'}"
                                @click="selectShowData('interval')">
                                间隔单元
                            </div>
                        </div>
                        <div class="sub mt1rem">
                            <van-collapse v-model="activeNamesSub">
                                <van-collapse-item title="主变压器" name="1" class="collapseSub">
                                    <van-collapse v-model="activeNamesSubSon">
                                        <van-collapse-item class="jg bgcccc" title="1#主变-本体及套管" name="1">
                                            <div class="deviceInfo">
                                                <div class="flexrow">
                                                    <div class="flexrow">
                                                        <div class="infolabelTitle">
                                                            设备状态:
                                                        </div>
                                                        <div class="textColorYb">在运</div>
                                                    </div>
                                                    <div class="flexrow">
                                                        <div class="infolabelTitle">
                                                            实时电流:
                                                        </div>
                                                        <div class="textCon textColor333">10A</div>
                                                    </div>
                                                    <div class="flexrow">
                                                        <div class="infolabelTitle">
                                                            实时负荷:
                                                        </div>
                                                        <div class="textCon textColor333">10KW</div>
                                                    </div>
                                                </div>
                                                <div class="flexrow mt1rem">
                                                    <div class=" flexrow">
                                                        <a href="#">设备台账</a>
                                                    </div>
                                                    <div class="flexrow width8rem">
                                                        <a href="#" @click="toPageDefect" class="colorRed">登记缺陷</a>
                                                        <a href="#" @click="toPageDanger" class="colororange">登记隐患</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="deviceInfo bgcF9F9F9 mt1rem">
                                                <div class="tourItem flexrow" v-for="(item,index) in tourList"
                                                    :key="index">
                                                    <div class="color838383">{{item.tourContent}}</div>
                                                    <div class="flexrow width3rem ml1rem">
                                                        <van-checkbox checked-color="#0EB295"
                                                            v-model="item.checked" shape="square">
                                                        </van-checkbox>
                                                        <van-icon name="close" size="1.2rem" />
                                                    </div>
                                                </div>
                                                <!-- <table>
                                                    <tr>
                                                        <tb>关键工序</tb>
                                                        <tb>
                                                            <div>
                                                                <span>标准要求及风控预防措施</span>
                                                                <label>查看</label>
                                                            </div>
                                                            <div>
                                                                <div>执行结果</div>
                                                                <div>
                                                                    <van-image :src=""></van-image>
                                                                    <van-image :src=""></van-image>
                                                                </div>
                                                            </div>
                                                        </tb>
                                                    </tr>
                                                    <tr>
                                                        <tb>作业准备18021396079</tb>
                                                        <tb>
                                                            <div>
                                                                <span>标准要求及风控预防措施</span>
                                                                <label>查看</label>
                                                            </div>
                                                            <div>
                                                                <div>执行结果</div>
                                                                <div>
                                                                    <van-image :src=""></van-image>
                                                                    <van-image :src=""></van-image>
                                                                </div>
                                                            </div>
                                                        </tb>
                                                    </tr>
                                                    <tr>
                                                        <tb>关键工序</tb>
                                                        <tb>
                                                            <div>
                                                                <span>标准要求及风控预防措施</span>
                                                                <label>查看</label>
                                                            </div>
                                                            <div>
                                                                <div>执行结果</div>
                                                                <div>
                                                                    <van-image :src=""></van-image>
                                                                    <van-image :src=""></van-image>
                                                                </div>
                                                            </div>
                                                            <div>异常描述</div>
                                                        </tb>
                                                    </tr>
                                                </table> -->
                                            </div>
                                        </van-collapse-item>

                                        <van-collapse-item class="jg bgcccc" name="2" title="2#主变">
                                            <template slot="title">
                                                <div>2#主变 <span class="red">未消除缺陷：1</span>
                                                    <span class="orange">未治理隐患：1</span></div>
                                            </template>
                                            内容
                                        </van-collapse-item>
                                    </van-collapse>
                                </van-collapse-item>
                            </van-collapse>
                        </div>
                        <div class="sub mt1rem">
                            <van-collapse v-model="activeNamesDlq">
                                <van-collapse-item title="断路器" name="1" class="collapseSub">

                                </van-collapse-item>
                            </van-collapse>
                        </div>
                    </div>
                </div>
            </div>
            <!--底部按钮-->
            <div class="btn">
                <van-button color="#17B39B" @click="submit" style="width: 90%;" size="small" type="primary">登记运行记录</van-button>
            </div>
        </div>
	</article>
</template>
<script>
	import Theader from "../component/header"
	export default {
		name: "registOperPlanDevice",
		components:{
			Theader
		},
		data() {
			return {
                active: 0,
                title: "登记运行记录",
                activeNames:["1"],
                activeNamesSubSon: [],
                activeNamesDlq: [],
                checked: true,
                activeNamesSub: ["1"],
                active: 0,// 当前选中
                actives:["1"],
                itemActives:["1"],
                taskDetail: {
                    substationName:"东善桥变",
                    voltageLevel:"500Kv",
                    patrolTypeName:"全面巡视",
                    cycleTime:"2月",
                    fristTime:"2021/07/07 18:30:00",
                    team:"变电运维一班",
                    tourWay:"人工巡视",
                    planTime:"2021/07/07 18:30:00",
                    nextTime:"2021/07/07 18:30:00",
                    require:"的撒啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊",
                },
                icon: {
                    iconTitle: require("../../../../assets/tour/icon-title.png"),
                    rfid: require("../../../../assets/tour/icon-rfid.png"),
                    scan:require('../../../../assets/tour/icon-scan.png'),
                    deleteRed:require('../../../../assets/tour/delet-red.png'),
                    audio:require('../../../../assets/tour/audio.png'),
                    delRed:require('../../../../assets/tour/delRed.png'),
                },
                tourList: [
                    {
                        tourContent: "运行监控信号、灯光指示、运行数据、等应正常。",
                        checked: true
                    },
                    {
                        tourContent: "运行监控信号、灯光指示、运行数据、等应正常。",
                        checked: true
                    },
                    {
                        tourContent: "运行监控信号、灯光指示、运行数据、等应正常。",
                        checked: true
                    },
                    {
                        tourContent: "运行监控信号、灯光指示、运行数据、等应正常。",
                        checked: true
                    },
                    {
                        tourContent: "运行监控信号、灯光指示、运行数据、等应正常。",
                        checked: true
                    },
                    {
                        tourContent: "运行监控信号、灯光指示、运行数据、等应正常。",
                        checked: true
                    }
                ],
                activeNames: ['1'],
                radio:1,
                person:[{},{}],
                SelectActive: "deviceType",
                lineWidth: "4rem",// 下划线宽度
			}
		},
		computed: {

		},
		methods: {
            //rifid 
            rfidBtn() {

            },
            //扫描二维码
            scanBtn() {

            },
            /**
             * @description: 设备类型、间隔单元点击事件
             * @param {*} type
             * @return {*}
             */
             selectShowData(type) {

                this.SelectActive = type
                console.log(this.SelectActive);
            },
            /**
             * @description: 提交
             * @param {*}
             * @return {*}
             */
            submit() {
                this.$router.push({
                    name:"newDangerDetail"
                })
            },
            /**
             * @description: 登记缺陷
             * @param {*}
             * @return {*}
             */
             toPageDefect() {
                this.$router.push({
                    name:"newAddDefect"
                })
            },
            /**
             * @description: 登记隐患
             * @param {*}
             * @return {*}
             */
            toPageDanger() {
                this.$router.push({
                    name:"newAddDanger"
                })
            },
            /**
             * @description: 红外测温
             * @param {*}
             * @return {*}
             */
             topageTeamp() {
                this.$router.push({
                    name: "redCapture",
                    query: {
                        params: ""
                    }
                })
            }
		},
		watch: {
			
		},
		mounted() {

		}
	}
</script>
<style scoped>
	article {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.bg_4dbfae{
		background: #F0F0F0 ;
    }

    .lable-list /deep/ .van-cell{
        padding: 10px 0;
        background: #F0F0F0;
    }
    .lable-list /deep/ .van-field__label{
        width: 7rem;
    }
    .lable-list /deep/ .van-field__control{
        text-align: right;
        color:#999;
    }

    .label-ll /deep/ .van-field__label{
        width: 7rem;
    }
    .label-ll /deep/ .van-field__control{
        text-align: right;
        color:#999;
    }
    
    .textarea-content /deep/ .van-cell{
        padding: 10px 16px;
    }
    .textarea-content /deep/ .van-field__control{
        text-align: left;
        color:#999;
    }
    .textarea-content{
        color:#333;
        font-size:0.875rem;
		border: 1px solid #E2E2E2;color:#999;
        padding-bottom: 1.5rem;
    }
    .textarea-content /deep/ .van-field__right-icon{
        position: absolute;
        bottom: -0.2rem;
        right: 0.5rem;
    }

    .selRadio  /deep/ .van-cell__title{
        width: 80px;
        flex: inherit;
        color:#666;
    }
    .selRadio  /deep/ .van-cell__value{
        display: flex;
        justify-content:flex-end;
    }
    .selRadio /deep/ .van-cell__title{
        width: 80px;
        flex: inherit;
    }
    /deep/ .van-radio-group--horizontal{
        justify-content:flex-end;
    }
    .btn{
        width: 100%;
        background: rgb(255, 255, 255);
        padding: 0.5rem 0px;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: center;
    }

    .col-title{
        display: flex;
        align-items: center;
    }
    .col-col{
        margin: 0 1rem;
        padding: 1rem 0;
    }

    .oper-status{
        margin: 0.7rem;background: #fff;border-radius: 0.7rem;
    }
    /deep/ .van-radio__label{
        color:#999;
    }
    .oper-status /deep/ .van-cell{
        border-radius: 0.7rem;
    }
    .lable-list .person{
        display: flex;
        margin-bottom: 1rem;
        color:#999;
        font-size: 14px;
    }
    .lable-list span,.lable-list label{
        flex:1;
    }
    .lable-list .person font{
        color:#333;
    }
    .lable-list .item{
        margin: 0.7rem 0;
    }
    .sign,.eval {
        margin: 0.7rem 0;
        color:#333;
        font-size: 1rem;
    }
    .sign-per{
        display: flex;
        align-items: center;
    }
    .sign-per-list{
        margin: 0.7rem 0;
        position: relative;
        display: flex;
        align-items: center;
    }
    .sign-per-list .sign-icon{
        position: absolute;
        top: -4px;
        right: 0px;
    }
    .per-btn{
        display: flex;
        justify-content: flex-end;
        margin: 0.7rem 0;
    }
    .sign-per-list span{
        padding: 0.5rem;
        margin: 0.5rem;
        color:#17B49B;
    }
    .eval-cont /deep/ .van-cell{
        background: #fff;
        color:#999;
    }
    
    .eval-cont{
        border: 1px solid #E2E2E2;
        padding: 0.5rem;
    }
    .lable-list /deep/ .van-cell__title{
        margin-left: 0.5rem;
    }


    
    .tabBox {
        width: 95%;
        margin: 0 auto;
        margin-top: 1rem;
    }

    .tabItem {
        width: 98%;
        /* height: 5rem; */
        background-color: #fff;
        border-radius: 4px;
        padding: 1%;
    }

    .tabItemSon {
        width: 95%;
        margin: 0 auto;
        margin-top: 1rem;
    }

    .wordTitle {
        display: flex;
        justify-content: flex-end;
        font-size: 1rem;
        /* justify-content: space-between; */
        align-items: center;
        width: 95%;
        color: #0EB295;
        margin-bottom: 0.7rem;
    }

    .wordTitle1 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        color: #0EB295;
        margin: 1rem 0;

    }

    .wordTitle>div {
        display: flex;
        justify-content: space-between;
        align-items: center;

    }

    .wordTitle1>div {
        /* width: 10rem; */
        width: 40%;
        height: 2rem;
        border: 1px solid #ccc;
        color: #333;
        text-align: center;
        line-height: 2rem;
    }

    .deviceType {
        width: 40%;
        border-bottom-left-radius: 4px;
        border-top-left-radius: 4px;
    }

    .interval {
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px;
    }

    .selectBtn {
        border: 1px solid #0EB295 !important;
        color: #0EB295 !important;
        background-color: #E7F7F5 !important;
    }

    .ml_1rem {
        margin-left: -1rem;

    }

    .titleText {
        margin-left: 0.5rem;
        color: #333;
    }

    .sub {
        border: 1px solid #0EB295;
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 0.5rem;
    }
    /deep/ .van-collapse-item__content{
        padding: 12px 10px;
    }
    .collapseSub {
        border-radius: 4px;
    }

    .btnBox {
        width: 100%;
        height: 5rem;
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .btnBox>div {
        flex: 0.4;
        height: 3rem;
        text-align: center;
        line-height: 3rem;
        border-radius: 4px;
    }

    .overTour {
        background-color: #0EB295;
        color: #fff;
    }

    .addTask {
        border: 1px solid #0EB295;
        color: #0EB295;
    }

    .defectItem {
        margin-bottom: 10px;
        padding: 15px;
        color: #8f8f94;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        /* margin-top: 1rem; */
        border-radius: 4px;
        background: #FFFFFF;
        box-shadow: 0px 0px 1px 0px #ccc;
        position: relative;
        overflow: hidden;

    }

    .defectItem .rightPart {
        width: 100%;
    }

    .fristBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.5rem;
    }

    .fristBox>div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .box {
        display: flex;
        margin-top: 0.5rem;
        align-items: center;
        color: #333;
    }

    .defectXz{
    /* color: #0EB295; */
    font-family: Source Han Sans CN;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0px;
    text-align: right;
    margin-left: -0.5rem;
    width: 75px;
}

    .textColorYb {
        color: #0EB295;
    }

    .textColor333 {
        color: #333;
    }

    .tourTime {
        min-width: 110px;
    }

    .textShow {
        width: 35%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .infolabelTitle {
        color: #838383;
    }

    .flexrow {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    a {
        text-decoration: underline;
    }

    .colorRed {
        color: red;
    }

    .colororange {
        color: orange;
    }

    .width8rem {
        width: 8rem;
    }

    .width3rem {
        width: 3rem;
    }

    .bgcF9F9F9 {
        background-color: #F9F9F9;
    }

    .color838383 {
        color: #838383;
    }

    .tourItem {
        padding: 1rem;
    }

    .drag {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        background-color: #0EB295;
        font-size: 0.5rem;
        text-align: center;
        position: absolute;
        bottom: 10%;
        right: 5%;
        color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 0px 0px 4px 0px #0EB295;
        z-index: 999;
    }
</style>


